<template>
  <div class="demo-select-multiple">
    <div
      class="column-divider"
      style="min-height: 7rem;">
      <div class="demo-button-line">
        <div class="d-title">单选搜索</div>
        <e-select
          filterable
          style="width:300px"
          v-model="values">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">多选搜索</div>
        <e-select
          multiple
          filterable
          style="width:300px"
          v-model="values1">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">下拉带搜索框</div>
        <e-select
          multiple
          filterable
          showFilter
          style="width:300px"
          v-model="values2">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DemoSelectSize',
  data () {
    return {
      displayCityList: [],
      orderListLoading: false,
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      values: [
      ],
      values1: [
      ],
      values2: [
      ],
      limitValue: []
    }
  },
  methods: {
    remoteMethod (query) {
      if (query) {
        this.orderListLoading = true
        setTimeout(() => {
          this.orderListLoading = false
          this.displayCityList = []
        }, 10000)
      } else {
        this.displayCityList = this.cityList
      }
    }
  },
}
</script>
<style>
.demo-select-multiple .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  width: 20rem;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
